<!DOCTYPE html>
<html th:lang="${language}" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header(#{okr.my})" />
    <th:block th:include="include :: okr-css" />
<!--    <style>-->
<!--        .continer {-->
<!--            height: 100px;-->
<!--            width: 100px;-->
<!--            background-color: aqua;-->
<!--        }-->

<!--        .continer div {-->
<!--            display: none;      /*默认隐藏*/-->
<!--        }-->

<!--        .continer:hover div {-->
<!--            display: initial;      /*当鼠标hover时展示*/-->
<!--        }-->
<!--    </style>-->
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row" >
        <div class="col-sm-12 search-collapse collapse">
            <form id="okr_search_form">
                <div class="select-list hidden">
                    <ul class="row">
                        <li class="col-xs-12 col-sm-6 col-md-4 hidden">
                            <label>周期ID：</label>
                            <input type="text" name="cycleId"   id="cycleId"/>
                        </li>
                        <li class="col-xs-12 col-sm-6 col-md-4">
                            <a class="btn btn-primary btn-rounded btn-sm"
                               onclick="$.table.search('okr_search_form')">
                                <i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()">
                                <i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
        <div class="btn-group-sm" id="toolbar" role="group">


            <div class="btn-group">
                <select class="form-control" data-style="btn-success"  id="cycleIdSelect"  th:onchange="changeCycleType()">
                    <optgroup th:label="#{okr.yearChoice}">
                        <div th:each="cycle : ${cycleList}">
                            <div th:if="${cycle.cycleType == 1}">
                                <span th:if="${cycle.status == 0}">
                                        <option th:value="${cycle.id}" th:text="${cycle.cycleName}"></option>
                                </span>
                                <span th:if="${cycle.status == 1}">
                                        <option th:value="${cycle.id}" th:text="${cycle.cycleName}"></option>
                                </span>
                            </div>
                        </div>
                    </optgroup>
                    <optgroup th:label="#{okr.quarterChoice}">
                        <div th:each="cycle : ${cycleList}">
                            <div th:if="${cycle.cycleType == 0}">
                                <span th:if="${cycle.status == 0}">
                                        <option th:value="${cycle.id}" selected="selected" th:text="${cycle.cycleName}"></option>
                                </span>
                                <span th:if="${cycle.status == 1}">
                                        <option th:value="${cycle.id}" th:text="${cycle.cycleName}"></option>
                                </span>
                            </div>
                        </div>
                    </optgroup>
                </select>
            </div>
        </div>




        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table">
            </table>
            <div class="col-sm-4" th:onclick="showNoFillUsers()">
                <div class="ibox">
                    <div class="ibox-content">
                        <h5>填写率(至少设置过一个Objective的员工占比)</h5>
                        <h2 id="rateOfFill"></h2>
                        <div class="progress progress-mini">
                            <div style="width: 0%;" class="progress-bar" id="fillRate"></div>
                        </div>

                        <!--                        <div class="m-t-sm small">4:32更新</div>-->
                    </div>
                </div>
            </div>
            <div class="col-sm-4" th:onclick="showAlignUsers()">
                <div class="ibox">
                    <div class="ibox-content">
<!--                        <div class="continer"><div>至少为一个Objective设置对齐的员工占比 </div></div>-->
                        <h5>对齐率(至少为一个Objective设置对齐的员工占比)</h5>
                        <h2 id="rateOfAligned"></h2>
                        <div class="progress progress-mini">
                            <div style="width: 0%;" class="progress-bar" id="alignedRate"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4" th:onclick="queryScoreUsers()">
                <div class="ibox">
                    <div class="ibox-content">
                        <h5>打分率(至少为一个Objective设置过评分的员工占比)</h5>
                        <h2 id="rateOfScore"></h2>
                        <div class="progress progress-mini">
                            <div style="width: 0%;" class="progress-bar" id="scoreRate"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>每个人的 Objective 的数量以三到五个为宜</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-pie-chart" _echarts_instance_="ec_1629202475053" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;"><div style="position: relative; overflow: hidden; width: 457px; height: 240px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas data-zr-dom-id="zr_0" width="457" height="240" style="position: absolute; left: 0px; top: 0px; width: 457px; height: 240px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div style="position: absolute; display: none; border-style: solid; white-space: nowrap; z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; background-color: rgba(50, 50, 50, 0.7); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); font: 14px / 21px &quot;Microsoft YaHei&quot;; padding: 5px; left: 401px; top: 93px; pointer-events: none;">访问来源 <br>搜索引擎 : 1548 (60.42%)</div></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>应时刻关注 Objective 进度</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-bar-chart" _echarts_instance_="ec_1629248996329" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;"><div style="position: relative; overflow: hidden; width: 800px; height: 240px; padding: 0px; margin: 0px; border-width: 0px;"><canvas data-zr-dom-id="zr_0" width="457" height="240" style="position: absolute; left: 0px; top: 0px; width: 457px; height: 240px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div></div></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>分数较低的 Objective 需要特别关注</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-bar-chart-score" _echarts_instance_="ec_1629248996329" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;"><div style="position: relative; overflow: hidden; width: 800px; height: 240px; padding: 0px; margin: 0px; border-width: 0px;"><canvas data-zr-dom-id="zr_0" width="457" height="240" style="position: absolute; left: 0px; top: 0px; width: 457px; height: 240px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div></div></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<script src="/ajax/libs/report/sparkline/jquery.sparkline.min.js"></script>
<script src="/ajax/libs/report/echarts/echarts-all.js"></script>
<script th:inline="javascript">
    var prefix = ctx + "dataKanban";
    $(function(){
        var options = {
            url : prefix + "/list",
            ajaxParams:{"cycleId":$("#cycleIdSelect").val()},
            onDblClickRow: onDbClick,
            showSearch:false,
            columns:[
                {
                    field : 'userId',
                    visible : false
                },
                {
                    field : 'userName',
                    title : [[#{okr.userName}]]
                },
                {
                    field: 'alignCount',
                    title: [[#{okr.alignCount}]]
                },
                {
                    field : 'fillCount',
                    title : [[#{okr.fillCount}]]
                },
                {
                    field: 'scoreAvg',
                    title: '平均评分',
                    formatter: function (value, row, index) {
                        return '<span class="badge badge-success">' + value.toFixed(2)  + '</span>';
                    }
                },
                {
                    field: 'confidenceAvg',
                    title: '平均信心指数',
                    formatter: function (value, row, index) {
                        return '<span class="badge badge-success">' + value.toFixed(2)  + '</span>';
                    }
                },
                {
                    field: 'processAvg',
                    title: '平均进度',
                    formatter: function (value, row, index) {
                        return '<span class="badge badge-success">' + value.toFixed(2)  + '%</span>';
                    }
                }
            ]
        }
        $.table.init(options);
    })
    showRate()
    queryProcessOfObjective()
    queryScoreOfObjective()
    queryOkrCountPie()

    function onDbClick(row, $element){
        $.modal.openTab("OKR列表详情页",ctx + "okr/info/viewUserOkrList/"+ row.userId+"/"+$("#cycleIdSelect").val());
    }

    function changeCycleType(type) {
        var cycleId = $("#cycleIdSelect").val();
        $("#cycleId").val(cycleId);
        $.table.search();
        showRate();
        queryProcessOfObjective()
        queryScoreOfObjective()
        queryOkrCountPie()
    }
    var cycleId = $("#cycleIdSelect").val();
    $.ajax({
        url: prefix + "/queryCycleId",
        data: $("#cycleIdSelect").val()
    })
    function showRate(){
        setTimeout(function(){
            $.ajax({
                url: prefix + "/rateOfData",
                type: "GET",
                sync: true,
                success: function(data){
                    document.getElementById("rateOfFill").innerHTML = data.rateOfFill.toFixed(2) + "%"
                    document.getElementById("fillRate").style.width = data.rateOfFill + "%"
                    document.getElementById("rateOfAligned").innerHTML = data.rateOfAlign.toFixed(2) + "%"
                    document.getElementById("alignedRate").style.width = data.rateOfAlign + "%"
                    document.getElementById("rateOfScore").innerHTML = data.rateOfScore.toFixed(2) + "%"
                    document.getElementById("scoreRate").style.width = data.rateOfScore + "%"

                }
            })
        }, 500)
    }
    function showNoFillUsers(){
        $.modal.openTab("周期内未填写Objective员工", prefix + "/showNoFillUsers")
    }
    function showAlignUsers(){
        $.modal.openTab("周期内未对齐过OKR的员工", prefix + "/showNoAlignUsers")
    }
    function queryScoreUsers(){
        $.modal.openTab("周期内未对OKR打分的员工", prefix + "/queryNoScoreUsers")
    }

    function queryProcessOfObjective(){
        setTimeout(function(){
            $.ajax({
                url: prefix + "/queryOkrProcess",
                type: 'GET',
                sync: true,
                success: function(data){
                    var barChart = echarts.init(document.getElementById("echarts-bar-chart"));
                    var option = {
                        title : {
                            text: 'Objective 进度',
                            subtext: ' ',
                            x:'center'
                        },
                        tooltip: {},
                        xAxis: {
                            type: 'category',
                            data: ['0-30%','30-60%','60-90%','90%+']
                        },
                        calculable : true,
                        yAxis: {
                            type: 'value'
                            // show: false
                        },
                        series: [{
                            name:'Objective 进度',
                            data: data,
                            type: 'bar'
                        }]
                    };
                    option && barChart.setOption(option);
                    window.onresize = barChart.resize;


                    if(barChart._$handlers.click){
                        barChart._$handlers.click.length = 0;
                    }
                    barChart.on('click', function(params){
                        console.log(params.name)
                        $.ajax({
                            url: prefix + "/processInterval",
                            data: {name: params.name}
                        })
                        $.modal.openTab("进度位于" + params.name + "的Okr数量", prefix + "/getOkrProcessList")
                    })
                }
            })
        },500)
    }

    function queryScoreOfObjective(){
        setTimeout(function(){
            $.ajax({
                url: prefix + "/queryOkrScore",
                type: 'GET',
                sync: true,
                success: function(data){
                    console.log(data)
                    var barChart = echarts.init(document.getElementById("echarts-bar-chart-score"));
                    var option = {
                        title : {
                            text: 'Objective 打分',
                            subtext: ' ',
                            x:'center'
                        },
                        tooltip: {},
                        xAxis: {
                            type: 'category',
                            data: ['0.0','0.0-0.3','0.3-0.6','0.6-0.9','0.9+']
                        },
                        calculable : true,
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            name:'Objective 打分',
                            data: data,
                            type: 'bar'
                        }]
                    };
                    option && barChart.setOption(option);
                    window.onresize = barChart.resize;


                    if(barChart._$handlers.click){
                        barChart._$handlers.click.length = 0;
                    }
                    barChart.on('click', function(params){
                        console.log(params.name)
                        $.ajax({
                            url: prefix + "/scoreInterval",
                            data: {name: params.name}
                        })
                        $.modal.openTab("分数位于" + params.name + "的Okr数量", prefix + "/getOkrScoreList")
                    })
                }
            })
        },500)
    }


    function queryOkrCountPie(){
        setTimeout(function(){
            $.ajax({
                url: prefix + "/queryOkrCount",
                type: "GET",
                success: function(data){
                    console.log(data)
                    var pieChart = echarts.init(document.getElementById("echarts-pie-chart"));
                    var pieOption = {
                        title : {
                            text: 'Objective 数量',
                            subtext: ' ',
                            x:'center'
                        },
                        tooltip : {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : ({d}%)"
                        },
                        legend: {
                            orient : 'vertical',
                            x : 'left',
                            data:['0个','1-2个','3-5个','5个以上']
                        },
                        calculable : true,
                        series : [
                            {
                                name:'Objective 数量',
                                type:'pie',
                                radius : '55%',
                                center: ['50%', '60%'],
                                data: data
                            }
                        ]
                    };
                    pieChart.setOption(pieOption);
                    $(window).resize(pieChart.resize);

                    if(pieChart._$handlers.click){
                        pieChart._$handlers.click.length = 0;
                    }
                    pieChart.on('click', function(params){
                        $.ajax({
                            url: prefix + "/OkrCount",
                            data: {name: params.name}
                        })
                        $.modal.openTab(params.name + "Objective数量的人", prefix + "/getOkrCountList")
                    })
                }
            })
        },500)
    }
</script>
</body>
</html>